<template>
  <div id="app" class="view">
    <div class="view-head"></div>
    <div class="view-body">
      <div class="view-body--item red"></div>
      <div class="view-body--item green">
        <Bar :chartData="bar1" />
      </div>
      <div class="view-body--item yellow"></div>
      <div class="view-body--item blue"></div>
    </div>
  </div>
</template>

<script>
import Bar from '@/components/Bar'
import { getBar1, getDeal } from '@/api/model'
export default {
  name: 'App',
  components: { Bar },
  data() {
    return {
      bar1: [],
      timer: null
    }
  },
  created() {
    this.fetchData()
    this.timer = setInterval(() => {
      this.fetchData()
    }, 2 * 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    fetchData() {
      getBar1().then(res => {
        this.bar1 = res.data.dataset
      })
      getDeal().then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>

<style lang="less">
body,
html {
  padding: 0;
  margin: 0;
}
#app {
  background: url('./assets/bg.jpg');
  height: 1080px;
  width: 1920px;
}
.view {
  .view-head {
    height: 83px;
  }
  .view-body {
    display: flex;
    flex-wrap: wrap;
    .view-body--item {
      width: 960px;
      height: 489px;
    }
  }
}
</style>
